<template>
  <div class="produce">
    <div class="product-header">
      <div class="product-header-inner">
        <span class="iconfont backHistory" @click="spotCheckView">
          &#xe6eb;
        </span>
        <div class="product-header-content">
          <div>生产日报详情</div>
        </div>
        <iconSvg
          name="home"
          w="20px"
          h="22px"
          class="home"
          @click.native="backToHomepage"
        ></iconSvg>
      </div>
    </div>
    <flexbox class="produce-dep">
      <flexbox-item>
        <div class="flex-item">部门：{{ departmentName }}</div>
      </flexbox-item>
      <flexbox-item>
        <div class="flex-item" style="text-align: right;">
          日期：{{ reportTime }}
        </div>
      </flexbox-item>
    </flexbox>
    <div class="produce-tab">
      <!-- <div
        class="produce-tab-item"
        @click="handler(1)"
        :class="statusIndex === 1 ? 'active' : ''"
      >
        <span>日报汇总</span>
        <div class="line"></div>
      </div> -->
      <div
        class="produce-tab-item"
        @click="handler(2)"
        :class="statusIndex === 2 ? 'active' : ''"
      >
        <span>详情</span>
        <div class="line"></div>
      </div>
      <div
        v-if="extra.tabs"
        class="produce-tab-item"
        @click="handler(3)"
        :class="statusIndex === 3 ? 'active' : ''"
      >
        <span>{{ extra.name }}</span>
        <div class="line"></div>
      </div>
    </div>
    <div class="produce-data-list" v-if="statusIndex === 1">
      <div class="produce-data-list-read">
        <checker
          v-model="read"
          radio-required
          default-item-class="read-item"
          selected-item-class="read-item-selected"
        >
          <checker-item :value="1">未读</checker-item>
          <checker-item :value="2">已读</checker-item>
        </checker>
      </div>
      <div
        class="item"
        v-for="item in readTableData"
        :key="item.id"
        @click="postDailyReportDetailRead(item)"
      >
        <div class="top">
          <!-- <span>{{ completePercent }}%</span> -->
          <span>{{ item.title }}</span>
          <div class="status draft" v-if="item.viewStatus === 1">未读</div>
          <div class="status submitted" v-else>已读</div>
        </div>
        <flexbox class="bottom">
          <flexbox-item>
            <div class="flex-item">{{ item.content }}</div>
          </flexbox-item>
        </flexbox>
      </div>
      <div class="item no-data" v-if="reportDetailList.length === 0">
        --暂无数据--
      </div>
      <div class="more" v-if="showMore" @click="getMore">查看更多</div>
    </div>

    <div class="produce-data-list" v-if="statusIndex === 2">
      <div class="job_type">
        <span>班次：</span>
        <select
          class="iu-select"
          id="device-option"
          v-model="orgJobShiftId"
          @change="handleJobChange"
        >
          <option v-for="item in jobList" :value="item.key" :key="item.key">{{
            item.key
          }}</option>
        </select>
      </div>
      <add-data :disabled="disabled" :sectionList="sectionList"></add-data>
    </div>
    <div class="produce-data-list full" v-if="statusIndex === 3">
      <iframe
        ref="iframe"
        width="100%"
        height="400px"
        frameborder="0"
        :src="extra.url"
      ></iframe>
    </div>
  </div>
</template>

<script>
import Common from "@/config/commom";
import {
  PopupHeader,
  Popup,
  Tab,
  TabItem,
  TransferDom,
  Radio,
  Checker,
  CheckerItem,
  Flexbox,
  FlexboxItem,
  Confirm
} from "vux";
import seriesPartBar from "@/components/common/produceData/seriesPartBar";
import seriesParams from "@/components/common/produceData/seriesParams";
import parking from "@/components/common/produceData/parking";

import addData from "@/components/common/produceData/addData";
import ProduceDataDao from "@/daos/produce_data_dao";
import dayjs from "dayjs";
const defaultFilterCache = {
  curDepartment: {},
  deviceTypeId: null
};
export default {
  name: "dailyDetail",
  data() {
    return {
      read: 1,
      activeName: "",
      departmentName: "",
      reportTime: "",
      desc: "",
      statusIndex: 2,
      tab1: 0,
      tab2: 0,
      isOpenPark: false,
      isOpenProduce: false,
      disabled: true,
      showJob: false,
      timeDifferenceList: [],
      seriesData: {},
      jobList: [
        {
          key: "全部",
          value: "全部"
        },
        {
          key: "大夜",
          value: "大夜"
        },
        {
          key: "白班",
          value: "白班"
        },
        {
          key: "小夜",
          value: "小夜"
        }
      ],
      records: [],
      reportDetailList: [],
      depId: "",
      depName: "",
      orgJobShiftId: "全部",
      showMore: false,
      pageNum: 1,
      pageSize: 10,
      showTree: false,
      sectionList: [],
      checkCount: {
        seriesParamsArray: []
      },
      extra: {
        tabs: false,
        url: "",
        name: ""
      },
      curDepartment: {
        id: "",
        departmentName: ""
      },
      departmentId: ""
    };
  },

  components: {
    Tab,
    TabItem,
    PopupHeader,
    Popup,
    Radio,
    Flexbox,
    FlexboxItem,
    Checker,
    CheckerItem,
    Confirm,
    addData,
    parking,
    seriesParams,
    seriesPartBar
  },
  directives: {
    TransferDom
  },
  inject: ["backToHomepage"],
  // watch:{
  //   orgJobShiftId:function(newValue){
  //     this.postDailyReportDetailFillData(this.reportId,this.orgJobShiftId);
  //   }
  // },
  computed: {
    completePercent() {
      const res = this.checkCount.completeCount / this.checkCount.count;
      if (!res) {
        return 0;
      }
      return Math.round(res);
    },
    claimPercent() {
      return 85;
    },
    jobName() {
      // const res = this.jobList.find(e => e.key === this.orgJobShiftId);
      // return (res && res.value) || "全部";
    },
    user() {
      //如果在store里拿不到设备信息，就去本地储存拿，并写入store。
      if (!this.$store.state.user) {
        this.$store.commit(
          "saveUser",
          JSON.parse(localStorage.getItem("user"))
        );
      }
      return this.$store.state.user;
    },
    readTableData() {
      let arr = this.reportDetailList.filter(e => e.viewStatus === this.read);
      return arr;
    }
  },
  // activated() {
  //   this.getDailyReportDetailList();
  // },
  activated() {
    this.reportId = this.$route.query.id;
    // this.departmentName = this.$route.query.departmentName;
    // this.departmentId = this.$route.query.departmentId;
    // this.reportTime = this.$route.query.reportTime;
    // this.getJobList();
    this.postDailyReportDetail(this.reportId);
  },

  methods: {
    initWx() {
      if (typeof wx !== "undefined") {
        let localUrl = location.href.split("#")[0];
        this.$http(
          this.$API.getWxSign,
          { url: encodeURIComponent(localUrl) },
          true
        ).then(res => {
          if (res) {
            wx.config({
              debug: false,
              appId: res.appId, // 必填,公众号的唯一标识
              timestamp: res.timestamp, // 必填,生成签名的时间戳
              nonceStr: res.nonceStr, // 必填,生成签名的随机串
              signature: res.signature, // 必填,签名
              jsApiList: [
                "updateAppMessageShareData",
                "updateTimelineShareData",
                "onMenuShareAppMessage", //旧的接口，即将废弃
                "onMenuShareTimeline" //旧的接口，即将废弃
              ] // 必填,需要使用的JS接口列表
            });
            /* 处理失败验证 */
            wx.error(function(res) {
              console.log("res:====>", res);
              // config 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
            });
            wx.ready(() => {
              let shareData = {
                title: `${this.departmentName}${dayjs(this.reportTime).format(
                  "YYYY年MM月DD日"
                )}生产日报`, // 分享标题
                desc: this.desc === "正常" ? "" : this.desc, // 分享描述
                link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl:
                  "https://static-a1b2.iuyun.com/4cd66227-1252-4c78-aa92-9ff7d3e4dec4.png", // 分享图标
                success: function() {
                  // 用户点击了分享后执行的回调函数
                  console.log("success");
                }
              };
              wx.updateAppMessageShareData(shareData);
              wx.updateTimelineShareData(shareData);
              try {
                wx.onMenuShareAppMessage(shareData);
                wx.onMenuShareTimeline(shareData);
              } catch (e) {}
            });
          }
        });
      }
    },
    spotCheckView() {
      // history.back(-1);
      this.$router.push("/produceDaily");
    },
    handleJobChange() {
      // this.showJob = false;
      this.postDailyReportDetailFillData(this.reportId, this.orgJobShiftId);
    },
    getDailyReportDetailList() {
      let params = {
        // departmentId: this.departmentId,
        pageNum: 1,
        pageSize: 20,
        reportId: this.reportId,
        userId: 0
      };
      ProduceDataDao.getDailyReportDetailList(params, res => {
        if (res.content && res.content.length) {
          this.reportDetailList.splice(0, this.reportDetailList.length);
          this.reportDetailList = res.content;
        }
      });
    },
    postDailyReportDetail(reportId) {
      ProduceDataDao.postDailyReportDetail(
        reportId,
        res => {
          if (res) {
            this.departmentName = res.departmentName;
            this.departmentId = res.departmentId;
            this.reportTime = res.reportTime;
            this.desc = res.desc;
            // console.log(this.departmentName);
            this.getDailyReportDetailList();
            this.postDailyReportDetailFillData(
              this.reportId,
              this.orgJobShiftId
            );
            this.postDailyReportDetailExtraTabs(this.reportId);
            this.initWx();
          }
        },
        desc => {
          this.$vux.toast.show({ text: desc, type: "warn" });
          setTimeout(() => {
            this.spotCheckView();
          }, 500);
        }
      );
    },
    postDailyReportDetailRead(item) {
      if (item.viewStatus === 2) {
        if (item.typeName === "告警") {
          this.$router.push(item.url);
        }
        return;
      }
      let data = {
        pageNum: 10,
        pageSize: 1,
        reportDetailId: item.id,
        reportId: item.reportId,
        viewStatus: 2
      };
      // console.log(1);
      ProduceDataDao.postDailyReportDetailRaed(data, res => {
        // console.log(res);
        if (item.typeName === "告警") {
          this.$router.push(item.url);
        }
      });
    },
    postDailyReportDetailFillData(reportId, orgJobShiftName = "全部") {
      let data = {
        reportId,
        orgJobShiftName
      };
      // console.log(1);
      ProduceDataDao.postDailyReportDetailFillData(data, res => {
        // console.log(res);
        if (res) {
          this.sectionList = res;
          this.sectionList.forEach(item => {
            if (item.sectionSeries.length === 2) {
              item.sectionSeries.shift();
            }
            item.detailList = item.sectionSeries;
            item.detailList.forEach(sItem => {
              // sItem.parkingList = {}
              // let arrs = []
              sItem.seriesParamsArray = JSON.parse(sItem.data);
              if (sItem.parking) {
                sItem.parkingDetail = JSON.parse(sItem.parking);
                sItem.parkingDetail.list = JSON.parse(sItem.parkingDetail.list);
                // sItem.parkingList.forEach(pe=>{
                //   pe.list = JSON.parse(pe.list)
                // })
              }
            });
          });
        }
      });
    },
    postDailyReportDetailExtraTabs(reportId) {
      ProduceDataDao.postDailyReportDetailExtraTabs(reportId, res => {
        // console.log(res);
        if (res && res.length) {
          this.extra.url = res[0].url;
          if (/\?/.test(this.extra.url)) {
            this.extra.url += "&showTitle=1";
          } else {
            this.extra.url += "?showTitle=1";
          }
          this.extra.tabs = true;
          this.extra.name = res[0].name;
          // this.iframeInit()
        }
      });
    },
    iframeInit() {
      this.$nextTick(e => {
        console.log(this.$refs.iframe.contentWindow.document);
      });
      // this.$refs.iframe.onload = () => {
      //   console.log("加载完成"); // 这样每次都会触发
      // };
    },
    getJobList() {
      ProduceDataDao.getJobList(res => {
        this.jobList.push({
          key: "全部",
          value: "全部"
        });
        res.forEach(item => {
          this.jobList.push({
            key: item.id,
            value: item.name
          });
        });
      });
    },
    selectJob() {
      // if (this.disabled) {
      //   return;
      // }
      this.showJob = true;
    },
    isOpenParkFunc(value) {
      this.isOpenPark = value;
    },
    isOpenProduceFunc(value) {
      this.isOpenProduce = value;
    },
    handleAddEmit() {
      this.seriesData.parkingList.unshift({
        id: "",
        productFillDataDetailId: "",
        startTime: "",
        endTime: "",
        remark: ""
      });
    },
    handleDeleteParkingFunc(index) {
      this.seriesData.parkingList.splice(index, 1);
      this.timeDifferenceList.splice(index, 1);
    },
    timeDifferenceFunc(data) {
      this.$set(this.timeDifferenceList, data.value, data.data);
    },
    toSpotCheckView() {
      this.$router.push({
        path: "/operaionManage",
        query: {
          index: 0,
          checkSecondTabIndex: 3,
          department: this.departmentName
        }
      });
    },
    toWorkSheetHomePage() {
      this.$router.push("/workSheetHomePage");
    },
    departmentSelected(params) {
      this.depId = params.department.id;
      this.depName = params.department.departmentName;
      this.needClearChart = true;
      this.curDepartment = params.department;
      this.lineChartOptions = {};
      if (
        !this.loading &&
        (!this.lineChartOptions ||
          !this.lineChartOptions.times ||
          this.lineChartOptions.times.length <= 0)
      ) {
        this.loading = true;
      }
      if (this.chartType !== 1) {
        this.dailyDetailList = [];
        this.getData();
      }
    },
    handler(value) {
      this.statusIndex = value;
      if (value === 3) {
        this.iframeInit();
      }
      // this.$nextTick(e => {
      // console.log(
      //   this.$refs.iframe.contentWindow.document.getElementsByClassName(
      //     ".page-title"
      //   )
      // );
      // });
    },
    handleDetail(data) {
      this.$router.push({
        path: "/produceDailyDetail",
        query: {
          id: data.id
        }
      });
    },
    getMore() {
      this.pageNum = this.pageNum + 1;
      this.getData();
    },
    initCurDepartment(id, departmentName) {
      let filterCache = Common.getFilterCache();
      if (!filterCache.curDepartment.id) {
        this.curDepartment = {
          departmentName,
          id: id
        };
        filterCache.curDepartment = this.curDepartment;
        Common.saveFilterObj(filterCache);
      }
      this.departmentId = id;
      this.dailyDetailList = [];
      this.getData();
    }
  }
};
</script>
<style lang="less">
.produce-data-list {
  &.full {
    .page-title {
      display: none;
    }
  }
  .vux-tab {
    background-color: #22233f !important;

    .vux-tab-item {
      background: none;
    }
  }
  .vux-tap-active:active {
    background: none;
  }
  .produce-data-tab-area {
    .el-divider__text {
      background-color: #1c1f37;
      color: #fff;
    }
  }
}
</style>
<style lang="less" scoped>
.product-header {
  width: 100%;
  height: 42px;
  background: #03061c;
  font-size: 16px;

  .product-header-inner {
    display: flex;
    padding-right: 20px;
    padding-left: 14px;
    align-items: center;
    height: 42px;
    color: #515a6e;

    .company-logo {
      width: 48px;
    }

    .backHistory {
      font-size: 16px;
      color: #fff;
    }

    .product-header-content {
      flex: 1;
      display: flex;
      justify-content: center;
      color: #fff;
      position: relative;

      .department_select {
        position: relative;
        min-width: 60px;
        border-radius: 2px;
        // background: #292A4D;
        transition: background 0.3s ease-in-out;

        &.active {
          background: #383a69;
        }

        .department_name {
          padding: 0 9px;
          padding-right: 26px;
          color: #fff;
          font-size: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .selece_icon {
          position: absolute;
          top: 50%;
          right: 2px;
          margin-top: -6px;
          color: #ffffff;
          transition: transform 0.3s ease-in-out;
          transform-origin: 50% 50%;
        }
      }

      .dep_box {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: -255px;
        padding-right: 16px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 4px;
        height: 250px;
        overflow-y: scroll;
        z-index: 9999999;
        -webkit-overflow-scrolling: touch;
      }
    }

    .home {
      width: 20px;
      height: 20px;
    }
  }
}

.produce {
  color: #ffffff;
  background: #1c1f37;
  min-height: 100%;

  .produce-tab {
    display: flex;
    height: 44px;
    width: 100%;
    align-items: center;
    background: #22233f;

    .produce-tab-item {
      position: relative;
      width: 50%;
      height: 44px;
      line-height: 44px;
      text-align: center;
      font-size: 14px;

      &.active {
        color: #456de6;
        background-color: initial;

        .line {
          position: absolute;
          left: 50%;
          bottom: 0;
          -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
          width: 20px;
          height: 3px;
          background: #177fff;
        }
      }
    }
  }
}

.produce-dep {
  font-size: 16px;
  .flex-item {
    padding: 8px;
  }
}

.produce-data-list {
  padding-top: 16px;
  padding-left: 10px;
  padding-right: 10px;
  &.full {
    padding: 0;
    .page-title {
      display: none;
    }
  }
  .produce-data-list-read {
    padding: 8px 0;
    .read-item {
      border: 1px solid #777;
      padding: 5px 15px;
    }
    .read-item-selected {
      border: 1px solid #177fff;
    }
  }

  .item {
    position: relative;
    background: #292a4d;
    border-radius: 4px;
    transition: 0.3s all ease-in-out;
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }

    .top {
      font-size: 14px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding: 10px;
      display: flex;
      justify-content: space-between;
      > span {
        // flex:1;
      }
    }

    .bottom {
      // padding: 10px;
      color: rgba(255, 255, 255, 0.6);
      font-size: 14px;
      .flex-item {
        padding: 10px;
      }
    }

    .status {
      // position: absolute;
      // right: 10px;
      // top: 10px;
      width: 50px;
      font-size: 14px;
      // flex: 1;
      text-align: center;

      &.draft {
        color: #dd9710;
      }

      &.submitted {
        color: #456de6;
      }
    }
  }

  .no-data {
    padding: 10px;
    text-align: center;
    color: grey;
  }

  .production-data {
    padding: 16px 0;
  }

  .add-item {
    display: flex;
    align-items: center;
    padding: 4px 0;
    overflow: hidden;
    color: #fff;

    // border-bottom: 1px solid #464656;
    .label {
      width: 120px;
      font-size: 16px;
      color: #fff;
    }

    .box {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #ffffff;
      font-size: 16px;

      .iconfont {
        font-size: 12px;
      }

      input {
        touch-action: none;
        width: 60%;
        border: 0;
        color: #ffffff;
        font-size: 16px;

        &:readonly {
          background: none;
          color: #ffffff;
          // -webkit-text-fill-color:#ffffff;
        }

        &.full {
          width: 100%;
        }
      }

      input::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: rgb(111, 111, 119) !important;
        font-size: 16px !important;
        text-align: left !important;
      }

      input::-moz-placeholder {
        /* Firefox 19+ */
        color: rgb(111, 111, 119) !important;
        font-size: 16px !important;
        text-align: left !important;
      }

      input:-ms-input-placeholder {
        /* IE 10+ */
        color: rgb(111, 111, 119) !important;
        font-size: 16px !important;
        text-align: left !important;
      }

      input:-moz-placeholder {
        /* Firefox 18- */
        color: rgb(111, 111, 119) !important;
        font-size: 16px !important;
        text-align: left !important;
      }
    }

    .status {
      &.draft {
        color: #dd9710;
      }

      &.submitted {
        color: #456de6;
      }
    }
  }
}

.more {
  height: 40px;
  font-size: 12px;
  line-height: 40px;
  text-align: center;
  color: #456de6;
}

.series-con {
  padding-top: 10px;

  .series-part {
    padding-bottom: 10px;

    .series-con-list {
      padding: 10px;

      .series-con-item {
        display: flex;
        align-items: center;
        padding: 4px 0;

        .series-con-label {
          width: 130px;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.6);
        }

        .series-con-box {
          flex: 1;
          color: #ffffff;
          font-size: 14px;

          input {
            width: 100%;
            border: 0;
            text-align: center;
            color: #ffffff;
            font-size: 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.6);

            &:readonly {
              background: none;
              color: #ffffff;
              // -webkit-text-fill-color:#ffffff;
            }

            &.full {
              width: 100%;
            }
          }

          input::-webkit-input-placeholder {
            /* Chrome/Opera/Safari */
            color: rgb(111, 111, 119);
          }

          input::-moz-placeholder {
            /* Firefox 19+ */
            color: rgb(111, 111, 119);
          }

          input:-ms-input-placeholder {
            /* IE 10+ */
            color: rgb(111, 111, 119);
          }

          input:-moz-placeholder {
            /* Firefox 18- */
            color: rgb(111, 111, 119);
          }
        }
      }
    }
  }
}
.job_type {
  font-size: 17px;
  color: #fff;
  padding-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .iu-select {
    height: 36px;
    width: 70%;
    padding: 2px 4px;
    border: none;
    outline: none;
    border: 1px solid rgba(69, 109, 230, 1);
    border-radius: 2px;
    font-size: 16px;
    color: #456de6;
    background: transparent;
    option {
      background: rgba(255, 255, 255, 0.9);
    }
  }
}
</style>
